<template>
  <div class="app-container">
    <el-button type="primary" @click="handleSubmit">一键已读</el-button>
    <box-card class="msg-content mt24" v-for="(item, index) in dataList" :key="index">
      <div class="msg-header">
        <div class="title" :class="{ 'title-read': item.readState === 0 }">{{ item.title }}</div>
        <div class="time">{{ item.createTime }}</div>
      </div>
      <div class="msg-body">
        <div class="detail">
          <div v-if="item.content.length > 10">
            <template v-if="!item.showFullContent">
              <span>{{ item.content.slice(0, 10) }}</span>
            </template><span v-show="!item.showFullContent">...</span>
            <!-- <div v-show="!item.showFullContent" class="show-more" @click="item.showFullContent = true">查看详情</div> -->
            <div v-if="item.showFullContent">{{ item.content }}</div>
          </div>
          <div v-else>{{ item.content }}</div>
          <div style="display: flex; align-items: center; justify-content: center;">
            <el-button plain v-if="!item.showFullContent" @click="handleDetail(item)">查看详情</el-button>
          </div>
        </div>
      </div>
    </box-card>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script setup>
import { getNoticeList, readNotice, readAllNotice } from "@/api/common"
const { proxy } = getCurrentInstance()

const loading = ref(false)
const total = ref(0)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})
const dataList = ref([])

function getList() {
  loading.value = true
  getNoticeList(queryParams.value).then(res => {
    loading.value = false
    dataList.value = res.data.list.map(item => ({
      ...item,
      showFullContent: false, // 添加一个用于控制显示全部内容的属性
    }))
    total.value = res.data.total
  })
}

function handleSubmit() {
  readAllNotice().then(res => {
    proxy.$modal.msgSuccess("消息清空")
  })
}

function handleDetail(item) {
  item.showFullContent = true
  if (item.readState === 0) {
    readNotice(item.id)
  }
}

getList()
</script>

<style lang="scss" scoped>
.msg-content {
  .msg-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .title {
      color: rgba(50, 50, 51, 1);
      font-size: 18px;
      font-weight: 500;
      position: relative;
    }

    .title-read::before {
      background-color: #AA261D;
      border-radius: 4px;
      content: '';
      position: absolute;
      right: -5px;
      top: 2px;
      width: 4px;
      height: 4px;
    }

    .time {
      color: rgba(51, 51, 51, 1);
      font-size: 14px;
      width: 240px;
      display: flex;
      justify-content: flex-end;
    }
  }

  .msg-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 12px;

    .detail {
      color: rgba(51, 51, 51, 1);
      font-size: 14px;
      line-height: 24px;
      padding-right: 40px;
      margin-right: 60px;
    }

    .el-button {
      height: 34px;
      margin-top: 20px;
    }
  }
}
</style>